<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>蓝源Eloan-P2P平台</title>
		<#include "common/links-tpl.ftl" />
		<link type="text/css" rel="stylesheet" href="/css/account.css" />
		<script type="text/javascript" src="/js/plugins/jquery.twbsPagination.min.js"></script>
		<script type="text/javascript" src="/js/plugins-override.js"></script>
		<script type="text/javascript" src="/js/My97DatePicker/WdatePicker.js"></script>
        <script type="text/javascript" src="/js/plugins/jquery.form.js"></script>


		<style type="text/css">
			.orderTime{
				width: 110px;
				height: 60px;
                border:1px solid #e0e0e0;
				margin: 5px;
				float: left;
				text-align: center;
				border-radius:5px;
				padding-top: 5px;
			}
			.orderBtn{
				border: 1px solid #e0e0e0;
				padding: 2px 5px;
                border-radius:5px;
				display: inline-block;
				margin-top: 1px;
                text-decoration:none !important;
				cursor: pointer;
			}
			.bg-info,.bg-success{
				padding: 10px;
				font-size: 16px;
			}
		</style>
	</head>
	<body>

		<!-- 网页顶部导航 -->
		<#include "common/head-tpl.ftl" />
		<!-- 网页导航 -->
		<#assign currentNav="personal" />
		<#include "common/navbar-tpl.ftl" />

		<div class="container">
			<div class="row">
				<!--导航菜单-->
				<div class="col-sm-3">
					<#assign currentMenu="ipLog" />
					<#include "common/leftmenu-tpl.ftl" />
				</div>
				<!-- 功能页面 -->
				<div class="col-sm-9">
               		<p class="bg-info">视频认证审核时间预约</p>
					<#if videoSuccess??>
                        <p class="bg-success">您已经通过视频认证
                        </p>
					<#elseif videoAuditOrder??>
                    <p class="bg-success">预约成功：客服 [${videoAuditOrder.auditor.username}] ,日期：[${(videoAuditOrder.orderDate)?string("yyyy-MM-dd")}],时间 ：[${videoAuditOrder.orderTime.orderTime()}]
						<a class="cancel" data-id='{"id":${videoAuditOrder.id}}'>撤销预约</a>
					</p>
					<#else>
					<form action="/saveVideoAuditOrder" name="orderForm" id="orderForm" class="form-inline" method="post">
						<input type="hidden" name="orderTime.id"/>
						<div class="form-group">
						    <label>预约客服</label>
						    <select class="form-control changeValue" name="auditor.id" id="auditor">
								<#list auditors as auditor>
						    		<option value="${auditor.id}"> ${auditor.username} </option>
								</#list>
						    </select>
						</div>
						<div class="form-group">
							<label>预约日期</label>
							<select  class="form-control changeValue" name="orderDate" id="orderDate">
								<#list orderDates as orderDate>
									<option value="${orderDate?string("yyyy-MM-dd")}">${orderDate?string("yyyy-MM-dd")}</option>
								</#list>
							</select>
						</div>
					</form>
					<#--<#if availableTime??>-->
						<div class="panel panel-default availableTime" style="margin-top: 20px;height: 400px;display: none;">
							<div class="panel-heading">
								预约时间
							</div>
							<div id="time">
								<#--<#list orderTimes as orderTime>
									<div class="orderTime">
										<div>
											${orderTime.begin} - ${orderTime.end}
										</div>
										<div>
											<a class="orderBtn" data-timeid="${orderTime.id}">点击预约</a>
										</div>

									</div>
								</#list>-->
							</div>
						</div>
					<#--</#if>-->
					</#if>

				</div>
			</div>
		</div>
						
		<#include "common/footer-tpl.ftl" />
		<script>

			$(".cancel").click(function () {
				var json = $(this).data("id");
                $.post("/updateVideoAuditOrderState",json,function (data) {
                    if(data.success){
                        window.location.href = "/videoAuditOrder?time=" + new Date().getTime();
                    }else{
                        $.messager.alert(data.msg);
                    }
                })
            });
			//值改变事件
			$(".changeValue").change(function () {
			    queryTime();
            });
			function queryTime() {
                var json = {
                    "auditorId":$("#auditor").val(),
                    "orderDate":$("#orderDate").val()
                };
                $.post("/availableTime",json,function (data) {
                    var temp = "";
                    $.each(data,function(index,ele){
                        temp += '<div class="orderTime">\n' +
                                '\t\t\t\t\t\t\t\t\t\t<div>\n' +
                                '\t\t\t\t\t\t\t\t\t\t\t'+ele.begin+' - '+ele.end+'\n' +
                                '\t\t\t\t\t\t\t\t\t\t</div>\n' +
                                '\t\t\t\t\t\t\t\t\t\t<div>\n' +
                                '\t\t\t\t\t\t\t\t\t\t\t<a class="orderBtn" data-timeid="'+ele.id+'">点击预约</a>\n' +
                                '\t\t\t\t\t\t\t\t\t\t</div>\n' +
                                '\n' +
                                '\t\t\t\t\t\t\t\t\t</div>';
                    });
                    $("#time").html(temp);
                    $(".orderBtn").click(function () {
                        $("#orderForm input[name='orderTime.id']").val($(this).data("timeid"));
                        $("#orderForm").ajaxSubmit(function (data) {
                            if(data.success){
                                window.location.href = "/videoAuditOrder?time=" + new Date().getTime();
                            }else{
                                $.messager.alert(data.msg);
                            }
                        })
                    });
                    $(".availableTime").css("display","block");

                });
            }
            queryTime();
		</script>
	</body>
</html>